/* --------------------------
   Basic page + cursor
   -------------------------- */
:root{
    --bg-green: #b8e986;  
    --dark-bg: #F7F0D4;
    --accent-yellow: #ffc93c;
    --accent-white: #E5DB9A;
    --box-bg-welcome: #E5DB9A;
    --muted: #0F0701;
    --container-width: 680px;
    --container-length: 500px;
    
}

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #9e7d68 #F7F0D4;
  }

  /* Chrome, Edge, Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #F7F0D4;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #9e7d68;
    border-radius: 10px;
    border: 3px solid #F7F0D4;
  }

/* arreglos */
html,body {
    min-height: 100vh;
    margin: 0px;
    padding: 0px;
    font-family: "Pixelify Sans", sans-serif;
    background-color: #f7f3ea;
    color: #0F0701;
    font-size: 8px; 
    line-height: 1.2;
    background-image: url(https://i.ibb.co/HQRSqhK/dd8b0ebc1c6e31c6e4914d7664fce46c-upscaled.jpg); 
    background-size: cover;     
    background-repeat: no-repeat;  
    background-position: center top;
    background-attachment: fixed; 
    overflow-x: visible;
    column-fill: auto; 
    cursor: url(https://cur.cursors-4u.net/nature/nat-11/nat1030.ani),
            url(https://cur.cursors-4u.net/nature/nat-11/nat1030.gif), auto !important;
}


/* cursor en toda la web */
a, a:link, a:visited, a:hover, a:active {
    cursor: url(https://cur.cursors-4u.net/nature/nat-11/nat1030.ani),
            url(https://cur.cursors-4u.net/nature/nat-11/nat1030.gif),
            auto !important;
}


@media (max-width:600px){
    .site-container { 
        transform: scale(2.05); 
    } 
}


.site-wrapper {
    /* centrado y márgenes reales */
    width: var(--container-width);
    margin: 40px auto; 
    padding-bottom: 260px ; /* para el espacio abajo */
    transform: scale(1.05);
    transform-origin: top center;
}

.site-container {
    width: var(--container-width);
    margin: 30px auto 40px auto;
    background-color: var(--dark-bg); /* Color de base */
    border-radius: 14px;
    padding: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
    position: relative;

    /* SOMBRAS Y EFECTOS */
    box-shadow: 0 0 0 6px #FA920F, 0 0 0 7px #383838;
    filter: drop-shadow(0 7px 1px rgba(0,0,0,0.90));
    transform: scale(1.3);
    transform-origin: top center;
    will-change: transform;

    /* PATRÓN REPETIDO DE PUNTITOS */
    background-image: url('https://foollovers.com/mat/simple02/l11-bg-simple.gif');
    background-repeat: repeat;       
    background-size: auto;
    min-height: auto;
    overflow: visible;
}




/* header logo */
.site-header {
    text-align:center;
    margin-bottom:10px;
}

/* music */
.music-bar {
  background: linear-gradient(#fffbe8, #ead7b5);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 2px rgba(0,0,0,0.2);
   display: flex;
  align-items: center;
  justify-content: space-between; 
  gap: 5px;
}

.music-title {
  flex: 1;                 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
}

.music-controls {
  display: flex;
  gap: 4px;
  flex-shrink: 0;          
}

.music-btn {
  background: linear-gradient(#fffbe8, #ead7b5);
  border: 1px solid black;        
  border-radius: 5px;
  font-size: 9px;
  padding: 2px 6px;
  cursor: pointer;

  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 2px rgba(0,0,0,0.25);

  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    filter 0.12s ease;
}


.music-btn:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.3);
}

.music-btn:hover {
  transform: translateY(1px);
  filter: brightness(0.97);

  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 1px rgba(0,0,0,0.2);
}

.music-btn:active {
  transform: translateY(2px);

  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.35),
    0 0 0 rgba(0,0,0,0);
}


/* Top imgs */
.top-images {
    display:flex;
    flex-direction:column;
    margin: 40px 0;
    margin-bottom: -14px;
}
.top-images .top-img {
    width:100%;
    height:120px;
    object-fit:cover;
    border-radius:8px;
    border:6px solid #E5DB9A;
    box-sizing:border-box;
}

.top-img-a {
    width:0%;
    height:0px;
    object-fit:contain;
    box-sizing:border-box;
}

.top-img-b {
    width:100%;
    height:240px;
    object-fit:cover;
    border-radius:8px;
    border:6px solid #E5DB9A;
    box-sizing:border-box;
}

.window-box {
    width: 100%;
    border-radius: 14px;
    overflow: hidden; /* IMPORTANTE */
    margin-bottom: 16px;
    padding-top: 30px; 
}

.window-top {
    position: absolute;
    top: 0;
    left: 0;

    width: 100.1%;
    height:35px;

    background: #FA920F;
    border-radius: 14px 14px 0 0; 

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    box-sizing: border-box;
    z-index: 10;
}


.site-url {
    position: relative; 
    background: #F7F0D4;
    padding: 2px 34px 2px 12px; 
    border-radius: 10px;

    font-size: 12px;
    font-weight: 600;
    color: #5b4a2f;

    width: 460px;
    height: 22px;

    display: flex;
    align-items: center;
}
.url-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-icon {
    position: absolute;
    left: 490px;  
    top: 50%;
    transform: translateY(-50%);

    font-size: 12px;
    opacity: 0.6;
    cursor: pointer;
}

.btn:hover {
    filter: brightness(0.9);
    cursor: pointer;
}

.search-icon:hover {
    opacity: 1;
}


.window-buttons {
    display: flex;
    gap: 6px;
}

.btn {
    width: 17px;
    height: 16px;
    border-radius: 30%;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 10px;
    font-weight: bold;
    color: #5b4a2f; /* color del icono */
    line-height: 1;
}
/* por si acaso */
.btn-min   { background: #F7F0D4; }
.btn-max   { background: #F7F0D4; }
.btn-close { background: #F7F0D4; }



/* 3era columna */
.columns {
    display:grid;
    grid-template-columns:15% 67% 16%; /* tamaño de cada columna: left, middle, right */
    gap:7px;
    margin-top:5px;
}

/* generic box - de todos los box */
.box {
    background: var(--box-bg);
    border-radius:8px;
    padding:3px;
    box-sizing:border-box;
    box-shadow: 0 0px 8px #0000;
    margin:7px auto;
    border: 1.5px solid #864836;
    outline: 1px solid #0000;
}

.nav-box {
    background: #D07301; /*marrón*/
    margin-top: 0px;
}
.socials-box {
    background: #FEC85D; /*amarillo*/
}
.nav-list:hover {
    color: #ffbd68;
}

.nav-box .nav-list a {
    background:
        linear-gradient(to bottom, #fffbe6, #ffe28a);
    border-color: #864836;
}

.nav-list .social-list {
    font-size: 12px;
}

.socials-box .social-list a {
    background:
        linear-gradient(to bottom, #fffbe6, #ffe28a);
    border-color: #864836;
}



/* LEFT columna specifics */


/* nav + social */
.box-title-a {
    /* imagen */
    background-image: url("https://foollovers.com/mat/i-blank/u02.gif");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;

    /* texto y contenedor */
    text-align: center;
    font-weight: 700;
    font-size: 10px;
    width: 100%;
    color: #494400 ; /* El color base del texto */
    text-shadow: 1px 0px 0 #F7F0D4, /* Sombra inferior derecha */
                0px 0px 0 #F7F0D4, /* Sombra inferior izquierda */
                0px -0px 0 #F7F0D4, /* Sombra superior derecha */
               -0px -0px 0 #F7F0D4; /* Sombra superior izquierda */
    
    /* texto centrado dentro de la img */
    height: 22px;   
    line-height: 24px; 
    padding: 0px;  
    margin: 1px 0;
    
    display: inline-block;
    position: relative; 
    z-index: 1;
}



.box-title-b {
    /* imagen */
    background-image: url("https://foollovers.com/mat/i-blank/u02.gif");
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    background-position: center;

    /* texto y contenedor */
    text-align: center;
    font-weight: 700;
    font-size: 10px;
    width: 100%;
    color: #494400 ; /* El color base del texto */
    text-shadow: 1px 0px 0 #F7F0D4, /* Sombra inferior derecha */
                0px 0px 0 #F7F0D4, /* Sombra inferior izquierda */
                0px -0px 0 #F7F0D4, /* Sombra superior derecha */
               -0px -0px 0 #F7F0D4; /* Sombra superior izquierda */
    
    /* texto centrado dentro de la img */
    height: 22px;     
    line-height: 24px;  
    padding: 0px;  
    margin: 1px 0;
    
    display: inline-block;
    position: relative; 
    z-index: 1;
}

.nav-list, .social-list {
    list-style:none;
    padding:0;
    margin:0;
    margin-bottom: 5px 
}
.nav-list li,
.social-list li {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 4px 0;
}


.nav-list, .social-list:hover {
    color: #ffbd68;
}

.profile-small{
    width:90px;
    display:block;
    margin:6px auto;
    margin-bottom: 0px;
    margin-top: 1px
}

/* botones de navegacion y social bleeeh*/
.nav-list a,
.social-list a {
    display: inline-block;
    width: 100%;
    padding: 6px 10px;
    font-size: 9px;
    text-align: center;
    text-decoration: none;
    color: #4f4f4f;

    background:
        linear-gradient(to bottom, #ffffff, #FFA12E);

    border-radius: 8px;
    border: 1px solid #cfdfea;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.8),
        0 1px 2px rgba(0,0,0,0.15);

    transition: all 0.15s ease;
}

.nav-list a:hover, .social-list a:hover {
    background:
        linear-gradient(to bottom, #f6fbff, #FFBA63);

    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        0 3px 4px rgba(0,0,0,0.2);
}

.nav-list a:active,
.social-list a:active {
    transform: translateY(0);
    box-shadow:
        inset 0 2px 3px rgba(0,0,0,0.2);
}

/* iconos */
.icono-nav {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    image-rendering: pixelated;
}


/* center columna boxes: header + inner scroll */
.color-box {
    border:4px solid #F7F0D4;
}
.box-header {
    font-weight:800;
    padding:2px 4px;
    border-radius:6px;
    margin-bottom:0px;
    color:#0e2b2a;
    width:100%;
    box-sizing:border-box;
    font-size: 15px
}
.header-a { background:#0000; }
.header-b { background:#0000; }
.header-c { background:#0000; }

.box-inner {
    background:#F7F0D4;
    border:3px solid #F7F0D4;
    border-radius:6px;
    overflow:hidden;
}

/* --- Colores personalizados del Box A (WELCOME) --- */


/*NUEVA COLUMNA DEL MEDIO*/
.center-scroll-box {
    width: 100%;
    height: 100%;
    background: transparent;
}

.center-scroll-inner {
    height: 600px; 
    overflow-y: auto;

    padding: 14px;
    box-sizing: border-box;

    font-size: 9px;
    line-height: 1.3;
} 

.main-img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 1px;
}
.text-with-img {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 8px;
    margin: 1px 0;
}

.side-img {
    width: 110px;
    height: auto;
    flex-shrink: 0;
}

.side-img2 {
    width: 120px;
    height: auto;
    flex-shrink: 0;
    
}

.separator-img {
    display: block;
    width: 100%;
    margin: 14px 1;
    margin-bottom: -20px;
    image-rendering: pixelated;
}

.separator-img-2 {
    display: block;
    width: 500px;         
    max-width: 80%;       
    margin: 14px auto;    
    margin-bottom: 5px; 
    image-rendering: pixelated;
}


.center-scroll-inner:-webkit-scrollbar {
    width: 8px; 
}

.center-scroll-inner::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.3);
    border-radius: 10px;
}

.center-scroll-inner::-webkit-scrollbar-thumb {
    background: #D07301;
    border-radius: 10px;
}

.center-scroll-inner::after {
    content: "";
    display: block;
    height: 40px;
}

/* nota - currently */
.contenedor-imagen {
    position: relative;  
    display: inline-block; 
    margin-top: -10px;
    image-rendering: pixelated;
}

.texto-superpuesto {
    position: absolute;
  top: 37%;
  left: 60px;  
  
  transform: rotate(-6deg); /* Inclinación izquierda */
    
  line-height: 0.5; 
  margin: 0px;
  
  color: #864836; 
  text-shadow: 0.1px 0.5px 0.5px rgba(0,0,0,0.5);
}

/* cuadro central con info */
/* wrapper para poner imagen + cuadro lado a lado */
.currently-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* CAJA GENERAL */
.info-box {
  width: 220px;
  border-radius: 6px;
  overflow: hidden;
  border: 1.5px solid #FA920F;
  font-size: 8px;
}

/* FILAS */
.info-row {
  display: flex;
  align-items: center;
  gap: 6px;

  padding: 6px;

  background: linear-gradient(
    to bottom,
    #F7F0D4,
    #FEC85D
  );

  border-bottom: 1px solid #FA920F;
}

/* quitar línea de la última */
.info-row:last-child {
  border-bottom: none;
}

/* iconos */
.info-row img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* links */
.info-row a {
  color: #864836;
  text-decoration: underline;
  font-weight: bold;
}

.info-row a:hover {
  color: #FA920F;
}

/* Last art */
.art-section-title {
  display: flex;
  align-items: center;
  gap: 6px;

  font-size: 11px;
  font-weight: bold;
  color: #864836;

  margin: 10px 0 6px 0;
}

.title-icon {
  width: 16px;
  height: 16px;
}

/* Last art - slide */
/* CAJA GENERAL */
.art-slider-box {
  width: 100%;
  overflow: hidden;

  background:
  url("https://i.pinimg.com/1200x/ce/ea/e0/ceeae002e49070bf97b714f4dc5de836.jpg");

  background-repeat: repeat;
  background-size: 78px 48px; 

  border: 1.5px solid #864836;
  border-radius: 8px;

  padding: 6px;
  box-sizing: border-box;
image-rendering: pixelated;

}


/* TRACK */
.art-slider-track {
  display: flex;
  gap: 8px;
  width: max-content;

  animation: art-slide 25s linear infinite;
}

/* PAUSA AL HOVER */
.art-slider-box:hover .art-slider-track {
  animation-play-state: paused;
}

/* SLIDE */
.art-slide {
  position: relative;
  width: 100px;
  height: 100px;

  flex-shrink: 0;

  border: 1px solid #D07301;
  border-radius: 6px;
  overflow: hidden;

  background: #F7F0D4;
}

/* IMAGEN */
.art-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* INFO ABAJO */
.art-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  display: flex;
  justify-content: space-between;
  align-items: center;

  font-size: 7px;
  padding: 2px 4px;

  background: rgba(255,255,255,0.85);
  color: #864836;
}

/* animación */
@keyframes art-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* stamps + byi*/

/* WRAPPER GENERAL */
.b4u-wrapper {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 10px 0;
}

/* STAMPS */
.b4u-stamps {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.b4u-stamps img {
  width: 58px;
  image-rendering: pixelated;
}

/* CAJA PRINCIPAL */
.b4u-box {
  border: 2px solid #FA920F;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  background: #FEC85D;
}

/* TÍTULO */
.b4u-title {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 6px 8px;

  font-weight: bold;
  font-size: 12px;
  color: white;

  background: linear-gradient(#FA920F, #FEC85D);
  text-shadow: 1px 1px 0 #D07301;
}

.b4u-icon {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

/* CONTENIDO */
.b4u-content {
  background: #FFF4D8;
  padding: 6px;
  font-size: 9px;
  color: #864836;
}

.b4u-content p {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 3px 0;
}

.b4u-content img {
  width: 10px;
  height: 10px;
  image-rendering: pixelated;
}

/* disclaimer part*/
/* DISCLAIMER BOX */
.disclaimer-box {
  width: 100%;
  box-sizing: border-box;

  background: #FFF4D8;
  border: 2px solid #FA920F;
  border-radius: 8px;

  padding: 6px 8px;
  margin-top: 10px;

  font-size: 9px;
  line-height: 1.3;
}

/* palabra DISCLAIMER */
.disclaimer-title {
  color: #fcba03;
  font-weight: bold;
  margin-right: 4px;
}

/* texto normal */
.disclaimer-text {
  color: #3b2a1a;
}

/* DIVIDER FINAAAAL */
.end-divider {
  display: block;
  margin: 10px auto 0 auto;
  margin-bottom: -10px;
  width: 180px;   
  max-width: 90%;
}



/* end - middle/center*/

/* RIGHT columna */
/* RIGHT a - Status */
.status-box {
    position: relative;
    height: 90px;
    padding: 0px;
    border-radius: 7px;

     background: #FEC85D;
    border: 1.5px solid #FA920F;
    text-align: center;
    margin-bottom: 10px;
}

.status-title {
    position: absolute;
    top:0px;
    left: 0px;
    right: 0px;
    height: 25px;
    line-height: 28px;
    padding: 0 10px;

    font-size: 14px;
    font-weight: bold;

    color: white;
    background: linear-gradient(#FA920F, #FEC85D);

    border-radius: 4px 4px 0 0;
    text-shadow: 1px 1px 0 #D07301;

    z-index: 2;
    margin-bottom: 6px;
}

.status-screen {
    position: relative;
    padding: 10px;

    background: #0000; 
}

.status-scroll {
    position: absolute;
    top:0px;
    left: 3px;
    right: 3px;
    max-height: 50px;
    max-width: 100px;
    overflow-y: auto;

    padding: 10px;

    background: rgba(255,255,255,0.75); /* el glass effect */
    border-radius: 6px;

    /* borde pixelado fake */
    box-shadow:
        inset 0 0 0 1px #FA920F,
        inset 0 0 0 2px white,
        inset 0 0 0 3px #FA920F;

    font-size: 9px;
    line-height: 1.0;
    margin-top: 30px;
    margin-bottom: 6px;
}

#statuscafe {
    background: transparent;
    padding: 0;
    color: #864836;
    text-decoration: none;
}

#statuscafe-username {
    font-weight: bold;
    margin-bottom: 2px;
    font-size: 6px;
    text-align: left;
    color: #D07301;
}

#statuscafe-content {
    margin: 0;
    font-size: 7px;
    text-align: left;
    color: #864836;
}


/*PICTO updates*/
.pictochat-box {
  background: #FEC85D;
  border: 1.5px solid #FA920F;
  border-radius: 7px;
  padding: 6px;
  font-size: 9px;
  margin-bottom: 10px;
}

/* título arriba */
.pictochat-title {
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  color: white;

  background: linear-gradient(#FA920F, #FEC85D);
  text-shadow: 1px 1px 0 #D07301;

  border-radius: 4px 4px 0 0;
  padding: 4px;
  margin: -6px -6px 6px -6px;
}

/* scroll */
/* CONTENEDOR GENERAL */
.pictochat-box {
  background: #FEC85D;
  border: 1.5px solid #FA920F;
  border-radius: 7px;
  padding: 0; 
  font-size: 9px;
  margin-bottom: 10px;
  overflow: hidden; 
}

/* TÍTULO */
.pictochat-title {
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  color: white;

  background: linear-gradient(#FA920F, #FEC85D);
  text-shadow: 1px 1px 0 #D07301;

  padding: 6px;
}

/* SCROLL */
.pictochat-scroll {
  max-height: 120px;
  overflow-y: auto;

  background: rgba(255,255,255,0.75);
  padding: 8px;
  margin: 0px;

  border-radius: 6px;
  box-sizing: border-box;

  border: 1.2px solid #D07301;
    border-radius: 0px 0px 0 0;
}

/* MENSAJES */
.picto-msg {
  border: 2px solid #FEC85D;
  padding: 3px;
  margin-bottom: 3px;
  background: #FFFBF4;
  box-sizing: border-box;
    border-radius: 4px;
}

/* TEXTO */
.user {
  color: #D07301;
  font-weight: bold;
}

.date {
  float: right;
  font-size: 8px;
  opacity: 0.7;
}

/* IMAGEN TECLADO */
.picto-img {
  width: 100%;
  display: block;
  border-radius: 0 0 7px 7px;
  image-rendering: pixelated;
}


/*CLAPs*/

.clap {
    border: #0000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: auto;
     transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    transition: all 0.15s ease;
    margin-top: 15px;
}

.clap-text {
    font-size: 8px;
    color: black;
    opacity: 0.85;
    cursor: pointer;
    text-align: center;
    text-decoration: underline;
    margin-bottom: 7px;
}

.clap:hover {
  transform: scale(1.05);
    transform: translateY(-1px);
}


/* Blinkies */

.blinkies-bar {
    width: 100%;
    overflow: hidden;
    margin-top: 8px;
    background: transparent;
}

.blinkies-track {
    display: flex;
    gap: 6px;
    width: max-content;
    animation: blinkie-scroll 20s linear infinite;
}

.blinkies-track img {
    height: 20px;
    image-rendering: pixelated;
}

@keyframes blinkie-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}


/* posters*/


/*poster de tamagotchi - left */
.poster-a {
    display: flex;
    justify-content: center; 
    margin: 6px 0;   /* separación d los boxes */
    border: 1.5px solid #8B7E76;
    outline: 1px solid #E5DB9A;
    
    width:140px;
    height:50px;
}


/* nicky - right*/
.poster-b {
  width: 90px;   
  height: auto;
  position: relative;
  image-rendering: pixelated; 
}

.poster-b img {
  width: 100%;
  height: auto;
  display: block;
  padding: 5px;
}
/* cajita flotante */
.nicky-tooltip {
  position: absolute;
  bottom: 80%;
  left: 80%;
  transform: translateX(-50%) translateY(-6px);

  background: #FFF6D8;
  color: #864836;
  font-size: 8px;
  padding: 6px 8px;

  border-radius: 6px;
  border: 1.5px solid #FA920F;
  box-shadow: 2px 2px 0 #FA920F;

  white-space: nowrap;
  opacity: 0;
  pointer-events: none;

  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.2,1.4,.4,1);

}

/* aparece al hover */
.poster-b:hover .nicky-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-10px);
}
.nicky-phrase {
  margin-top: 6px;
  text-align: center;
  font-size: 8px;
  line-height: 1.3;
  color: #000;
  font-style: italic;
  opacity: 0.9;
}

.nicky-name {
  color: #FA920F; /* amarillo */
  font-weight: bold;
}



/* imagenes centrales - middle */
/* imagen left */
.poster-c {
    display: flex;
    justify-content: center; /* centrados */
    gap: 6px;                /* espacio entre ellos */
    margin: 7px 0;           /* separación d los boxes */
    border: 1.5px solid #8B7E76;
    outline: 1px solid #E5DB9A;
    
    width:100px;
    height:140px;
    
}

.poster-3 {
    height: 14px;            
    image-rendering: pixelated; 
}




/* RIGHT c - CHAT */
.solid-top-c {
     /* imagen */
    background-image: url("https://i.ibb.co/JF0PGdFv/papelito1.png");
    background-repeat: no-repeat;
    background-size: 100% 300%; /* estira  */
    background-position: center;
    

    /* texto y contenedor */
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    width: 100%;
    color: #F7F0D4; /* color base del texto */
    text-shadow: 1px 1px 0 #864836, /* Sombra inferior derecha */
                -1px 1px 0 #864836, /* Sombra inferior izquierda */
                1px -1px 0 black, /* Sombra superior derecha */
               -1px -1px 0 black; /* Sombra superior izquierda */
    
    /* texto centrado dentro de la img */
    height: 30px;     
    line-height: 30px; 
    padding: 10px;  
    margin: -10px 0;
    margin-top: -10px;
    margin-left: -15px;
    
    display: inline-block;
    position: relative; 
    z-index: 1;
}

.solid-box-c {
    background: #0000;
    border-radius:8px;
    padding:0px;
    font-size: 12px;
    border: 1.5px solid #0000;
    outline: 1px solid #0000;
}


.solid-inner { padding:0px; background:#0000; border-radius:6px; }

.mini-bottom-c {
    
     background:
        linear-gradient(#FA920F, #F7F0D4), url(" ");

    background-size: auto;
    background-position: center;
    background-repeat: repeat;

    border-radius: 3px;
    height: 180px;
    width: 110px;
    
}

.comments-frame {
    background: #50b4ca;
    border-radius:8px;
    padding:5px;
    font-size: 12px
}

/* el guestbook - atabook */
.guestbook-btn img {
  width: 105px; 
  height: auto;

  image-rendering: pixelated;
  cursor: pointer;

  transition: transform 0.15s ease, filter 0.15s ease;
}


.guestbook-btn img {
  image-rendering: pixelated;
  cursor: pointer;

  transition: transform 0.15s ease, filter 0.15s ease;
}

/* hover: efecto botón */
.guestbook-btn img:hover {
  transform: translateY(1px) scale(0.98);
  filter: brightness(1.1);
}

/* click */
.guestbook-btn img:active {
  transform: translateY(2px) scale(0.95);
}
.guestbook-text {
  font-size: 8px;
  color: #864836;
  margin-top: 2px;
  text-align: center;
}

/* el guestboook dog*/
.guestbook-dog {
  width: 48px;        
  image-rendering: pixelated;
  margin-bottom: -2px;
  margin-top: -10px;
}



/* footer */
.site-footer {
  text-align: center;
  font-size: 8px;
  color: black;
}


/* blinkies row */

.blinkies-bar {
    width: 100%;
    overflow: hidden;
    margin: 10px 0;
    background: transparent;
}

.blinkies-track {
    display: flex;
    gap: 0;
    width: max-content;
    animation: blinkie-scroll 20s linear infinite;
}

.blinkies-track img {
    height: 20px; 
    image-rendering: pixelated;
}

/* animación */
@keyframes blinkie-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}



/* dots flotantes, bueno imagenes*/

.float-dot-a {
    
}

.float-dot-b {
    position:absolute;
    width:70px;
    height:70px;
    z-index:6;
}

.float-dot-c {
    
}

.float-dot-d {
    position:absolute;
    width:15px;
    height:23px;
    z-index:6;
}

.float-dot-e {
    position:absolute;
    width:37px;
    height:28px;
    z-index:6;
}

.float-dot-f {
    position:absolute;
    width:50px;
    height:50px;
    z-index:6;
}

.float-dot-g {
    position:absolute;
    width:50px;
    height:50px;
    z-index:6;
}

.float-dot-h {
    position:absolute;
    width:70px;
    height:60px;
    z-index:6;
}

.float-dot-i {
    position:absolute;
    width:110px;
    height:110px;
    z-index:6;
}

.float-dot-j {
     
}

.dot-1 { left:25px; top:350px; } /*paint*/
.dot-2 { right:-15px; top:128.5px; } /*toro*/
.dot-3 { left:0px; top:490px; } /*sonic*/
.dot-4 { left:660px; top:380px; } /*chao*/
.dot-5 { right:10px; top:685px; } /*minecraft chest*/
.dot-6 { left:40px; top:670px; } /*minecraft bob*/
.dot-7 { left:70px; top:667px; } /*minecraft seahorse*/
.dot-8 { left:0px; top:665px; } /*minecraft payaso pez*/
.dot-9 { left:85px; top:50px; } /*hojas arriba*/
.dot-10 { right:0px; top:570px; } /*grass abajo*/


/*--------------------------------------------*/
/*SECCIÓN DE JAVA - SCRIPT*/

/*SECCIÓN DE RESOURCES*/
/* resources */

.resources-top {
  text-align: right;
  margin-bottom: 6px;
}

.return-link {
  font-size: 10px;
  text-decoration: none;
  color: #864836;
}

.return-link:hover {
  text-decoration: underline;
}

.page-title {
  font-size: 18px;
  margin: 4px 0;
}

.page-desc {
  font-size: 11px;
  margin-bottom: 10px;
}

.resources-box {
  border: 1.5px solid #FA920F;
  border-radius: 8px;
  overflow: hidden;
}

.res-header {
  background: linear-gradient(#FA920F, #FEC85D);
  color: white;
  font-weight: bold;
  padding: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-shadow: 1px 1px 0 #D07301;
}

.res-content {
  background: #FFF7E0;
  padding: 6px 10px;
  font-size: 11px;
}

.res-content a {
  color: #864836;
  text-decoration: none;
}

.res-content a:hover {
  text-decoration: underline;
}

.mini-icon {
  width: 14px;
  height: 14px;
}

/*SECCIÓN DE ABT*/
/* about */
/* ABOUT TOP */
.about-top {
  display: grid;
  grid-template-columns: 120px 1fr 60px;
  gap: 8px;
}

.about-img-big {
  width: 155%;
  margin-left: -10px;
}

.about-img-small {
  width: 60%;
  padding: 10px;
  margin-top: -10px;
  margin-bottom: -10px;
  margin-left: 50px;
image-rendering: pixelated;
}

.about-center {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.about-scroll-box {
  max-height: 220px;
  max-width: 140px;
  margin-left: 50px;
  overflow-y: auto;
  background: #fff7e0;
  border: 1px solid #fa920f;
  padding: 6px;
  font-size: 10px;
  border-radius: 10px;
}

.about-buttons img {
  width: 70px;
  margin-top: 23px;
  margin-bottom: 0px;
image-rendering: pixelated;
}

/* HORIZONTAL SCROLL */
.h-scroll {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  overflow-x: hidden;
  margin-bottom: 10px;
}


.h-scroll img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
}


/* LIKES BOX */
.likes-box {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 8px;
  image-rendering: pixelated;

}

.likes-text {
  background: #fff7e0;
  border: 1px solid #fa920f;
  padding: 6px;
  border-radius: 10px;
}

.likes-section h4 {
  margin: -2px 0;
  font-size: 14px;
}

.likes-section ul {
  columns: 2;             
  column-gap: 30px;
  margin: 0;
  padding-left: 16px;
}

.likes-section li {
  font-size: 11px;
  line-height: 1.4;
  break-inside: avoid;
}

.likes-section ul {
  list-style-type: "• ";
}
.likes-section li::marker {
  color: #fa920f;
}


.likes-img {
  width: 110%;
  margin-top: 5px;
}

/* BLINKIES */
.blinkies-scroll {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-top: 10px;
  margin-left: 5px;
}

.blinkies-scroll img {
  width: 70px;
  height: auto;
  flex-shrink: 0;
  image-rendering: pixelated;
}
.blinkies-scroll img:hover {
  transform: translateY(-1px);
  transition: 0.15s;
}

/* TITLES */
.section-title {
  margin: 10px 0 4px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
    image-rendering: pixelated;

}

/* FAVS */

.fav-section {
  margin: 12px 0;
  position: relative;
}

.fav-deco {
  position: absolute;
  top: 24px;      
  right: 10px;   
  width: 140px;
  image-rendering: pixelated;
  opacity: 0.95;
  pointer-events: none;
}


.fav-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  margin-bottom: 6px;
}

.fav-icon {
  width: 14px;
  height: 14px;
image-rendering: pixelated;
}

.fav-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.fav-scroll img {
  width: 90px; 
  height: auto;
  border-radius: 6px;
  flex-shrink: 0;
}
.fav-scroll img:hover {
  transform: translateY(-2px);
  transition: 0.2s;
}



/* SONGS */
.fav-songs {
  columns: 2;
  column-gap: 30px;
  font-size: 11px;
  padding-left: 16px;
  margin-top: 6px;
   list-style-type: "♪ ";
}

.fav-songs li {
  line-height: 1.4;
  break-inside: avoid;
}


.divider {
  width: 100%;
  margin-top: -10px;
  padding: 0px;
  margin-bottom: -20px;
  image-rendering: pixelated;
}

.divider-2 {
  width: 100%;
  margin-top: -5px;
  padding: 4px;
  margin-bottom: 0px;
  image-rendering: pixelated;
}

/* SECCIÓN DEL BLOG */
/* BLOG */
.blog-section {
  margin-top: 12px;
}

.blog-title {
  text-align: center;
  font-size: 20px;
  margin-bottom: 6px;
}

.blog-desc {
  font-size: 11px;
  text-align: justify;
  margin-bottom: 12px;
}

/* BLOG POST BOX */
.blog-post {
  border: 2px solid #fa920f;
  border-radius: 10px;
  margin-bottom: 12px;
  background: #fff7e0;
  overflow: hidden;
}

/* TITLE BAR */
.blog-post-title {
  background: linear-gradient(#fa920f, #fec85d);
  color: white;
  font-weight: bold;
  font-size: 12px;
  padding: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-shadow: 1px 1px 0 #d07301;
}

/* SCROLLING CONTENT */
.blog-post-content {
  max-height: 150px;
  overflow-y: auto;
  padding: 8px;
  font-size: 11px;
  border-top: 1px solid #fa920f;
}

.blog-post-content p {
  margin: 4px 0;
}

/* BLOG CONTENT 2 COLUMNS */
.blog-two-col {
  display: grid;
  grid-template-columns: 235px 70px;
  gap: 8px;
}

/* TEXTO CON SCROLL */
.blog-text {
  overflow-y: auto;
  max-height: 200px;
  padding-right: 4px;
  text-align: justify
}

/* IMAGEN LATERAL */
.blog-img {
  width: 120px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 0px;
}


.blog-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}


/* SECCIÓN DE COMMISSIONS */
/*COMMISSIONS */
.commissions-top {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 12px;
  image-rendering: pixelated;
}

.page-title {
  image-rendering: pixelated;
}

.section-title {
  image-rendering: pixelated;
}

.center {
  text-align: center;
}

.divider-img {
  width: 100%;
  margin: 12px 0;
  image-rendering: pixelated;
}

.commission-card {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 10px;
  margin-bottom: 12px;
}

.commission-text ul {
  padding-left: 14px;
  font-size: 11px;
}

.commission-img {
  position: relative;
}

.commission-img img {
  width: 100%;
  border-radius: 6px;
}

.commission-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(#fa920f, #fec85d);
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  text-align: center;
  text-shadow: 1px 1px 0 #d07301;
  border-radius: 6px 6px 0 0;
}

/* CONTENEDOR GENERAL */
.gen-commissions {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 12px;
  margin-bottom: 16px;
}

/* TEXTO */
.gen-text {
  font-size: 11px;
}

.gen-text ul {
  padding-left: 14px;
  margin: 0;
}

.gen-text li {
  margin-bottom: 4px;
}

/* GRID DE IMÁGENES GENERAL */
.gen-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;

  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}

/* CADA TARJETA - PRICES */
.price-card {
  background: #fff7e0;
  border: 1px solid #fa920f;
  border-radius: 6px;
  overflow: hidden;
  text-align: center;
  font-size: 10px;
  color: #ffff;
}

.price-card img {
  width: 100%;
  height: 100px;
  object-fit: contain;
  background: #fff7e0;
  display: block;
}

.price-card span {
  display: block;
  padding: 4px;
  background: linear-gradient(#fa920f, #fec85d);
}

/* CUSTOM INICIO */

.custom-commissions {
  grid-template-columns: 1fr 1.2fr;
  gap: 12px;
  margin-bottom: 16px;
  align-items: center;
}

/* TEXTO */
.custom-text {
  font-size: 11px;
  text-align: justify; 
  hyphens: auto; 
}

.custom-text ul {
  padding-left: 14px;
  margin: 0;
  padding-right: 5px; 
}

.custom-text li {
  margin-bottom: 4px;
}


/* Contenedor principal */
.custom-grid {
    display: flex;
    flex-direction: row;
    gap: 5px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 5px;
    border: 2px solid #fa920f;
    background: #fff7e0;
    border-radius: 10px;
}

/* Tarjetas individuales */
.custom-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff7e0;
    border: 1px solid #fa920f;
    padding: 0px;
    border-radius: 8px;
    flex: 0 0 200px; 
    color: #ffff;
}

/* Estilo de la imagen */
.custom-card img {
    width: 100%;
    height: 250px;
    object-fit: contain; 
    background: #fdf2d0; 
    border-radius: 5px;
}

.custom-card span {
    display: block;
    margin-top: 0px;
    padding: 4px 70px;
    background: linear-gradient(#fa920f, #fec85d);
    border-radius: 7px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    font-weight: bold;
    font-size: 10px;
    text-align: center;
}

/* CUSTOM END */

.page-desc a {
  color: #864836;
  text-decoration: underline;
  font-weight: bold;
}

.page-desc a:hover {
  color: #FA920F;
}

.a {
  color: #864836;
  text-decoration: underline;
  font-weight: bold;
}

.a:hover {
  color: #FA920F;
}


/* DOS Y DONTS BOX */
.dos-donts-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: #fff7e0;
  border: 1px solid #fa920f;
  border-radius: 10px;
  padding: 10px;
  margin: 16px 0;
  font-size: 11px;
}

/* COLUMNA */
.dos-donts-col ul {
  padding-left: 14px;
  margin: 4px 0 0;
}

.dos-donts-col li {
  margin-bottom: 4px;
}

/* TÍTULOS */
.dos-donts-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-bottom: 4px;
}

/* colors letras */
.donts {
  color: #7a2e2e;
}

.dos {
  color: #3b6b3b;
}

/* TOS */

.tos-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tos-btn img {
  height: 24px;
  cursor: pointer;
}

.tos-btn img:hover {
  transform: translateY(1px) scale(0.98);
  filter: brightness(1.1);
}


.tos-btn img {
  image-rendering: pixelated;
  cursor: pointer;

  transition: transform 0.15s ease, filter 0.15s ease;
}

/* click */
.tos-btn img:active {
  transform: translateY(2px) scale(0.95);
}


.faq-box {
  max-height: 120px;
  overflow-y: auto;
  border: 1px solid #fa920f;
  border-radius: 8px;
  padding: 8px;
  font-size: 11px;
  background: #fff7e0;
}
.faq-box a {
  color: #864836;
  text-decoration: underline;
  font-weight: bold;
}

.faq-box a:hover {
  color: #FA920F;
}

.contact-buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  margin-bottom: -20px;
  image-rendering: pixelated;
}

.divider-middle {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
  image-rendering: pixelated;
}

.divider-end {
  width: 100%;
  border-radius: 10px;
  margin-bottom: -60px;
  image-rendering: pixelated;
}



/* PROJECT  SECCION */
/* PROJECT  START */

/* PROJECTS */
.projects-section {
  margin-top: 12px;
}

/* TÍTULUUO */
.projects-title {
  text-align: center;
  font-size: 24px;
  letter-spacing: 2px;
  color: #fa920f;
  text-shadow: 2px 1px 0 #864836;
  margin-bottom: 6px;
}

/* DESCRIPCIÓN */
.projects-desc {
  font-size: 11px;
  text-align: justify;
  margin-bottom: 14px;
}

/* SUBTÍTULO */
.projects-subtitle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  margin: 10px 0 6px;
}

/* TARJETA DE PROYECTO NORMAL */
.project-card {
  position: relative;
  margin-bottom: 10px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.project-card {
  position: relative;
  width: 100%;
  height: 140px;  
  border-radius: 12px;
  transition: transform 0.2s ease;
}

/* IMAGEN */
.project-card img {
  width: 100%;
  display: block;
  border-radius: 10px;
}
/* IMAGEN Q ENCAJE */
.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* TEXTO SOBRE IMAGEN */
.project-title {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
  z-index: 2;
}

/* OVERLAY */
.project-overlay {
  position: absolute;
  inset: 0;
  background: rgba(250, 146, 15, 0.85);
  color: white;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  padding: 10px;
}

/* EFECTO HOVER */
.project-card:hover {
  transform: scale(0.97);
}

.project-card:hover .project-overlay {
  opacity: 1;
}

/* PROYECTOS DESHABILITAOS */
.project-card.disabled img {
  filter: grayscale(100%);
}

.project-link {
  text-decoration: none;
  display: block;
}


.divider-img-project {
  width: 50%;
  margin-top: -80px;
  padding: 100px;
  margin-bottom: -100px;
  image-rendering: pixelated;
}

/* MORE SOON */
.more-soon {
  margin-top: 14px;
  font-size: 16px;
}

.more-soon-img {
  display: block;
  margin: 6px auto 0;
  width: 80px;
}

/* OCS SECCION */
/* OCS SECCION */

.justify {
  text-align: justify;
}

.ocs-subtitle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  margin: 10px 0 6px;
}

.ocs-subtitle img {
  width: 16px;
  height: 16px;
}

.ocs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.ocs-card {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.2s ease;
}


.ocs-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ✨ Hover */
.ocs-card:hover {
  transform: scale(0.96);
  filter: brightness(0.85);
}

.ocs-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.2s ease;
}

.ocs-card:hover img {
  filter: grayscale(100%) brightness(0.75);
}

.ocs-overlay-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  text-align: center;
  padding: 6px;
  opacity: 0;
  pointer-events: none;
  text-shadow: 1px 1px 2px black;
  transition: opacity 0.2s ease;
}

.ocs-card:hover .ocs-overlay-text {
  opacity: 1;
}

.ocs-orange-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 140, 40, 0.55); /* naranja */
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}



.divider-img-ocs {
  display: block;
  margin: 10px auto 0 auto;
  margin-bottom: 10px;
  width: 180px;   
  max-width: 90%;
  image-rendering: pixelated;
}